<template>
  <div class='index'>
    <TopTitle :Title="TitleText"></TopTitle>
      <div class="send-code">
        <span v-if='disSendCode' class='popup-span' @click='handleSendCodeClick()'   v-text='sendCode'></span>
        <span v-else class='popup-span' v-text='sendCode'></span>
      </div>
  </div>
</template>

<script>
import TopTitle from "@/components/topTitle/topTitle1"
  export default {
    name: "getCode",
    components:{
      TopTitle,
    },
    // 暴露的手机号
    // props:['phone'],
    data(){
      return {
        TitleText:'验证码',
        disSendCode:true,
        sendCode:"发送验证码",
        timer:null,
        mobile:'',
        code:'',
        phone:'13403167483'
      }
    },
    methods:{
      //点击发送验证码倒计时60s；
      timeCount() {
        this.disSendCode =false;
        let count = 60;
        this.timer = setInterval(() => {
          count--;
          this.sendCode = `${count}s后重发`
          if (count <= 0) {
            clearInterval(this.timer);
            //如果为0时则让点击；
            this.disSendCode = true;
            this.sendCode = '发送验证码';
          }
        }, 1000)
      },
      handleSendCodeClick(){
        const reg = /^1[34578][0-9]{9}$/
        const flagNo = reg.test(this.phone)
          if(this.phone){
            if(flagNo){
              this.timeCount();
              this.handleCode();
            }else{
              alert('请输入合法的手机号');
            }
          }else{
            alert('请输入手机号获取验证码');
          }
        
      },
      //获取验证码
      handleCode(){
        this.$emit('handleCode');
      }
    }
  }
</script>

<style scoped>
   .send-code{
     width:150px;
     height:60px;
     text-align: center;
     line-height:60px;
     border:1px solid #ffcb00;
     color:#ffcb00;
   }
</style>
